
/** html5 showModal */
const html5ShowModal = (options: UniApp.ShowModalOptions) => {
	/** 设置默认选项 */
	const setDefaultOptions = () => {
		const { showCancel = true, cancelText = '取消', cancelColor = '#000', confirmText = '确定', confirmColor = '#576B95' } = options;
		return { showCancel, cancelText, cancelColor, confirmText, confirmColor, ...options };
	};
	options = setDefaultOptions();
	
	/** 屏幕高度 */
	const pageScreenHeight = uni.getSystemInfoSync().screenHeight;
	
	/** view cancel */
	let viewCancelReact = null;
	
	/** view */
	let viewReact = null;
	
	/** view confirm */
	let viewConfirmReact = null;
	
	/** 动画 */
	const startAnimation = (animationOptions: Record<string, string | number>) => {
		plus.nativeObj.View['startAnimation'](
			animationOptions, 
			{
				view: viewReact
			
			}, {
				view: viewCancelReact
				
			}, {
				view: viewConfirmReact
				
			}, 
			plus.nativeObj.View['clearAnimation']
		);
	};
	
	
	/** close */
	const close = () => {
		startAnimation({ type: 'pop-out', duration: 300 });
		viewReact.hide();
		viewCancelReact?.hide?.();
		viewConfirmReact.hide();
	};
	
	/** open */
	const open = () => {
		startAnimation({ type: 'pop-in', duration: 1000 });
		viewReact.show();
		viewCancelReact?.show?.();
		viewConfirmReact.show();
	};
	
	
	/** 生成提示框view */
	const creatView = () => {
		const style: PlusNativeObjViewStyles = {
			top: '0px',
			left: '0px',
			width: "100%",
			height: `${pageScreenHeight}px`
		};
		
		const view = new plus.nativeObj.View('showModalView', style);
		view.draw([
			{
				tag: 'rect', 
				id: 'modal',
				color: 'rgba(0, 0, 0, .1)',
				position: {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}
				
			}, {
				tag: 'rect',
				id: 'concent',
				color: '#fff',
				rectStyles: {
					radius: '8px',
					borderWidth: '2px'
				},
				position: {
					top: '42%',
					left: '20%',
					width: '60%',
					height: '16%'
				}
				
			}, {
				tag: 'font',
				id: 'title',
				text: options.title,
				textStyles:{
					size: '36px',
					color: '#000'
				},
				position: {
					left: '20%',
					width: '60%',
					height: '2%',
					top: `${pageScreenHeight * 0.435}px`
				}
				
			}, {
				tag: 'font',
				id: 'text',
				text: options.content,
				textStyles: {
					size: '30px',
					color: '#666',
					align: 'center',
					whiteSpace: 'normal'
				},
				position: {
					left: '23%',
					width: '54%',
					height: '8%',
					top: `${pageScreenHeight * (options.title ? 0.455 : 0.435)}px`
				}
				
			}, {
				tag: 'rect',
				id: 'line',
				color: '#EAEAEC',
				position: {
					top: '53%',
					left: '20%',
					width: '60%',
					height: '1px'
				}
				
			}, {
				tag: 'rect', 
				id: 'line2',
				color: '#EAEAEC',
				position: { 
					top: '53%',
					left: '49%',
					width: !options.showCancel ? '0px' : '1px',
					height: !options.showCancel ? '0px' : '5%'
				}
			}
		]);
		
		
		if (options.showCancel) {
			const viewCancel = new plus.nativeObj.View('cancel', {
				left: '20%',
				width: '30%',
				height: '5%',
				top: `${pageScreenHeight * 0.53}px`,
				backgroundColor: 'rgba(255, 255, 255, 0)'
			});
			
			viewCancel.draw([
				{
					tag: 'font',
					id: 'cancel',
					text: options.cancelText,
					textStyles: {
						size: '30px',
						color: options.cancelColor as string
					}
				}
			]);
			
			viewCancel.addEventListener('click', () => {
				options.success?.({ cancel: true } as UniNamespace.ShowModalRes);
				close();
				
			}, false);
			
			viewCancelReact = viewCancel;
		};
	
		
		const viewconfirm = new plus.nativeObj.View('confirm', {
			height:'5%',
			top: `${pageScreenHeight * 0.53}px`,
			backgroundColor: 'rgba(255, 255, 255, 0)',
			left: !options.showCancel ? '20%' : '50%',
			width: !options.showCancel ? '60%' : '30%'
		});
		
		viewconfirm.draw([
			{
				tag: 'font',
				id: 'confirm',
				text: options.confirmText,
				textStyles: {
					size:'30px',
					color: options.confirmColor as string
				}
			}
		]);
		
		viewconfirm.addEventListener('click', () => {
			options.success?.({ confirm: true } as UniNamespace.ShowModalRes);
			close();
			
		}, false);
		
		
		if (options.mask) {
			view.addEventListener('click', () => {
				options.success?.({ mask: true } as UniNamespace.ShowModalRes);
				close();
				
			}, false);
		};
		
		
		viewReact = view;
		viewConfirmReact = viewconfirm;
	};
	
	
	/** 初始化 */
	creatView();
	options.back && plus.key.addEventListener('backbutton', close, false);
	
	return { open, close };
};


export default html5ShowModal;